<!--
 * @Author: wjc
 * @Date: 2025-09-16 11:08:41
 * @LastEditors: wjc
 * @LastEditTime: 2025-11-06 17:20:44
 * @Description: 
-->
<template>
  <section :style="style" class="layout-tabbar">
    <NiceTabsView
      :active="currentActive"
      :class="theme"
      :context-menus="createContextMenus"
      :draggable="preferences.tabbar.draggable"
      :show-icon="showIcon"
      :tabs="currentTabs"
      :wheelable="preferences.tabbar.wheelable"
      :middle-click-to-close="preferences.tabbar.middleClickToClose"
      @close="handleClose"
      @sort-tabs="tabbarStore.sortTabs"
      @unpin="unpinTab"
      @update:active="handleClick"
    />
    <div class="flex-center h-full">
      <NiceTabsToolMore v-if="preferences.tabbar.showMore" :tab="tab" :menus="tollMenus" />
      <NiceTabsToolScreen
        v-if="preferences.tabbar.showMaximize"
        :screen="contentIsMaximize"
        @change="toggleMaximize"
        @update:screen="toggleMaximize"
      />
    </div>
  </section>
</template>

<script lang="ts" setup>
  import type { CSSProperties } from 'vue'

  import { useTabbarStore, useTabs } from '@nice/hooks'
  import { NiceTabsToolMore, NiceTabsToolScreen, NiceTabsView } from '@nice/nice-ui'

  import { useTabbar } from './use-tabbar'

  defineOptions({
    name: 'BasicLayoutTabbar',
  })

  const props = withDefaults(
    defineProps<{ height?: number; showIcon?: boolean; theme?: string }>(),
    {
      showIcon: true,
      theme: 'light',
      height: 38,
    }
  )

  const style = computed((): CSSProperties => {
    const { height } = props
    return {
      height: `${height}px`,
      marginLeft: '224px',
      width: 'calc(100% - 224px)',
    }
  })

  const tabbarStore = useTabbarStore()
  const { unpinTab } = useTabs()

  const {
    createContextMenus,
    currentActive,
    currentTabs,
    handleClick,
    handleClose,
    toggleMaximize,
    contentIsMaximize,
  } = useTabbar()

  const tab = computed(() => tabbarStore.getTabByKey(currentActive.value))
  const tollMenus = computed(() => {
    const menus = createContextMenus(tab.value)
    return menus.map((item) => {
      return {
        ...item,
        label: item.text,
        value: item.key,
      }
    })
  })

  const preferences = ref({
    tabbar: {
      draggable: true,
      styleType: 'chrome',
      wheelable: true,
      middleClickToClose: true,
      showMore: true,
      showMaximize: true,
    },
  })
</script>

<style lang="scss" scoped>
  .layout-tabbar {
    @apply border-border bg-card flex w-full border-b transition-all;
  }
</style>
